<div class="login-bg-section skin-bgc"></div>
<div class="login-content">

    <div class="login-title skin-color">
        登录
    </div>
    <form nz-form class="login-form" [formGroup]="loginForm" (ngSubmit)="submitForm()">
        <nz-form-item>
            <nz-form-control>
                <nz-input-group [nzPrefix]="prefixUser" [nzSize]="'large'">
                    <input type="text" nz-input formControlName="identity" placeholder="请输入用户名称" autofocus>
                </nz-input-group>
                <nz-form-explain
                    *ngIf="loginForm.get('identity').dirty && loginForm.get('identity').hasError('required')">
                    请输入用户名
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control>
                <nz-input-group [nzPrefix]="prefixLock" [nzSize]="'large'">
                    <input nz-input type="password" formControlName="password" placeholder="请输入登陆密码">
                </nz-input-group>
                <nz-form-explain
                    *ngIf="loginForm.get('password').dirty && loginForm.get('password').hasError('required')">
                    请输入密码
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item style="margin-top: -8px">
            <nz-form-control>
                <a style="float: right" routerLink="/register">还未注册?</a>
                <button nz-button nzType="primary" nzSize="large" [nzLoading]="loading"
                        [disabled]="!loginForm.valid" class="login-button">登陆
                </button>
            </nz-form-control>
        </nz-form-item>
    </form>
</div>

<ng-template #prefixUser><i nz-icon type="user" class="login-form-icon"></i></ng-template>
<ng-template #prefixLock><i nz-icon type="lock" class="login-form-icon"></i></ng-template>
